<!--
 * @Description: * 分类列表
 * @Date: 2021-01-04 22:46:36
 * @LastEditTime: 2021-01-14 19:25:08
 * @Author: Ji YingHao
 * @FilePath: \iview\pages\list\index.vue
-->
<template>
  <div class="list">
    <div class="list_">
      <Row>
        <Col span="6" v-for="(item,i) in list" :key="i">
          <Card class="card_">
            <div style="text-align: center" class="desc_">
              <nuxt-link
                  class="link_"
                  :to="{ name: 'info', query: { id: item.id } }"
                >
              <img :src="item.image" />
              </nuxt-link>
              <h6>
                <nuxt-link
                  class="link_"
                  :to="{ name: 'info', query: { id: item.id } }"
                >
                {{ item.storeName }}
                </nuxt-link>
                </h6>
              <p>
                <nuxt-link
                  class="link_"
                  :to="{ name: 'list', params: { name: 'jiyinghao' } }"
                >
                  <Badge
                    class="button_title"
                    status="processing"
                    color="geekblue"
                    :text="$route.query.name"
                  />
                </nuxt-link>
              </p>
              <p><Badge status="error" color="red" text="近期102次下载" /></p>
              <p>
                <Badge
                  status="success"
                  color="blue"
                  text="2020-12-12 01:20:56"
                />
              </p>
            </div>
          </Card>
        </Col>
      </Row>
      <div style="text-align: center" v-if="total !== 0">
        <Page :total="total" :page-size="page.limit" show-total @on-change="changePage">
          共{{ total }}条
        </Page>
      </div>
    </div>
  </div>
</template>
<script>
import API from "@/api/index";
export default {
  name: "list",
  components: {},
  watch:{
    $route(to,from){
      console.log(from.query.id);//从哪来
      console.log(to.query.id);//到哪去
      if( from.query.id !== to.query.id ){
        console.log('shuaxin');
        this.page.id = this.$route.query.id;
        this.info();
      }
    }
},
  data() {
    return {
      total: 0,
      img: "https://pic4.zhimg.com/50/v2-b2bf803eccc380a483d84d94f8fe48cc_400x224.jpg",
      img_: "https://file.iviewui.com/asd/asd-pro-3.png",
      list: [],
      page: {
        limit: 20,
        page: 1,
        id: 0
      }
    };
  },
  computed: {},
  mounted: function () {
    this.page.id = this.$route.query.id;
    this.info();
  },
  methods: {
    info() {
      this.list = [];
      API.products(this.page).then((res) => {
        this.total = res.data.total;
        this.list.push( ...res.data.list );
      });
    },
    changePage(event) {
      this.page = event;
      this.info();
    },
  },
};
</script>
<style lang="scss">
.list {
  padding-bottom: 100px;
  .list_ {
    margin-top: 20px;
    > p {
      text-align: center;
      button {
        width: 200px;
      }
    }
    .ivu-card {
      margin-bottom: 15px;
    }
    img {
      width: 100%;
      height: 200px;
    }
    .card_ {
      margin: 0 10px 20px 10px;
    }
    .desc_ {
      h6 {
        text-align: left;
        border-bottom: solid 1px #e0e0e0;
        padding-bottom: 10px;
        padding-top: 5px;
        margin-bottom: 10px;
        display: inline-block;
        height: 50px;
        width: 100%;
      }
      p {
        text-align: left;
      }
    }
    .button_title > span {
      color: #2d8cf0 !important;
    }
    .button_title:hover span {
      cursor: pointer !important;
      color: #0a7bf4 !important;
    }
  }
}
</style>